import {StyleSheet, Text, View} from "react-native";
import React from "react";
import Judging from "../../../assets/images/judging.svg";
import Reject from "../../../assets/images/reject.svg";
import Approve from "../../../assets/images/approve.svg";
import Cancel from "../../../assets/images/cancel.svg";

type HeadFormProps = {
    nickname: string;
    sealNumber: string;
    status: string;
}

export enum TaskStatus {
    NOT_START = 0,      // 未开始
    IN_PROGRESS = 1,    // 进行中
    COMPLETED = 2,      // 已完成
    REJECTED = 3,       // 已拒绝
    CANCELLED = 4,      // 已取消
}

const getStatu = (status: number) => {
    switch (status) {
        case TaskStatus.COMPLETED:
            return '已完成'
        case TaskStatus.IN_PROGRESS:
            return '进行中'
        case TaskStatus.REJECTED:
            return '已拒绝'
        case TaskStatus.CANCELLED:
            return '已取消'
        default:
            return '未开始'
    }
}
const STATUS_ICON: Record<string, React.ReactNode> = {
    进行中: <Judging width={80} height={80} fill="#000"/>,
    已拒绝: <Reject width={80} height={80} fill="#000"/>,
    已完成: <Approve width={80} height={80} fill="#000"/>,
    已取消: <Cancel width={80} height={80} fill="#000"/>,
};

export function HeadForm({nickname, sealNumber, status}: HeadFormProps) {
    return (
        <View style={styles.headContainer}>
            <View style={{flex: 1, marginRight: 16}}>
                <Text style={{fontSize: 20, fontWeight: 'bold'}}>
                    {nickname}的用印申请
                </Text>
                {sealNumber[0] === 'B'
                    ?
                    <View style={{
                        backgroundColor: "#ff9800",
                        width: "auto",
                        alignSelf: "flex-start",
                        borderRadius: 13,
                        paddingHorizontal: 10,
                        paddingVertical: 5,
                    }}>
                        <Text style={{color: "#fff", fontSize: 18}}>{sealNumber}</Text>
                    </View>
                    : <View style={{
                        backgroundColor: "#10b981",
                        width: "auto",
                        alignSelf: "flex-start",
                        borderRadius: 13,
                        paddingHorizontal: 10,
                        paddingVertical: 5,
                    }}>
                        <Text style={{color: "#fff", fontSize: 18}}>{sealNumber}</Text>
                    </View>}
            </View>
            {STATUS_ICON[getStatu(status)] ?? <Text>未知状态</Text>}
        </View>
    )
}

const styles = StyleSheet.create({
    headContainer: {
        backgroundColor: '#fff',
        padding: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        elevation: 0.9,
    },})